<template>
  <div class="chenger">

    <el-tabs>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="全部服务" name="null"></el-tab-pane>
    <el-tab-pane label="服务中" name="InService"></el-tab-pane>
    <el-tab-pane label="已完成" name="Finish"></el-tab-pane>
  </el-tabs>
  <el-form :model="formlist">
    <el-form-item>
      <el-input v-model="formlist.caluye" placeholder="输入客户姓名"></el-input>
    </el-form-item>
   <el-button class="chencat" @click="souuso">搜索</el-button>
   <el-button @click="shtbel">重置</el-button>
  <el-button round size="small"  type="text" class="upload" @click="hExport"
        ><img src="@/assets/login/Group2545.png" />导出报表</el-button
      >
  </el-form>
      <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="serviceOrderId"
        label="服务单号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="serviceUserName"
        label="客户姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="provideServiceUserName"
        label="服务人员">
      </el-table-column>
        <el-table-column
        prop="totalPrice"
        label="支付金额">
      </el-table-column>
        <el-table-column
        prop="payChannel"
        label="支付方式">
        <template v-slot="{row}">
          {{foemindatafo(row.payChannel)}}
        </template>
      </el-table-column>
        <el-table-column
        prop="status"
        label="服务状态">
        <template v-slot="{row}">
          {{fornasdg(row.status)}}
        </template>
      </el-table-column>
        <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button
              type="text"
              size="small"
              @click="xhcent(row)"
              >查看详细</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-tabs>
  </div>
</template>

<script>
import {userserve} from '@/api/user'
import employeesConst from "@/constant/employees";
// 服务状态的
const hireTypegtrx = {};
employeesConst.hireTypyx.forEach((item) => {
  hireTypegtrx[item.status] = item.value;
});
//订单状态的
const hireTyMapx = {};
employeesConst.hireTypyengtx.forEach((item) => {
  hireTyMapx[item.payChannel] = item.value;
});
export default {
data () {
  return {
       activeName: "first",
       formlist:{
        caluye:''
       },
        list:[],
          q:{
           username:null,
           status:null
          },
          page:1,
          size:10,
          total:0
          // z:{
          //    index:Number,
          //  size:100,
          //       username:null,
          //  status:null
          // }
  }
},
created(){
  this.loachentr()
},
methods: {
  async loachentr(){
    const res = await userserve(this.q)
    this.list = res.data.data.slice(
      (this.page - 1) * this.size,
      this.page * this.size
    )
    this.total = res.data.data.length-0
    // console.log(this.list);
    for(let i = 0; i < this.list.length; i++){
     this.list[i].createTime = this.list[i].createTime.slice(0,10)
    }

  },
  // 查看详细
  xhcent(row){
     this.$router.push({
        path: "/home/customization",
        query: { row },
      });
  },
  // tab栏切换
    handleClick(vall) {
      console.log(vall.name);
      if (vall.name == "null") {
       this.q.status = null;
        this.page = 1
        this.loachentr();
      } else if (vall.name == "InService") {
        this.q.status = "InService";
        this.page = 1
        this.loachentr();
      } else if (vall.name == "Finish") {
        this.q.status = "Finish";
        this.page = 1
        this.loachentr();
      }
    },
    // 导出报表
    async hExport(){
        const mapinfo = { 
          'serviceOrderId':'服务单号',
          'serviceUserName':'客户姓名',
          'provideServiceUserName':'服务人员',
          'totalPrice':'支付金额',
          'payChannel':'支付方式',
          'status':'服务状态',
          'title':'服务类型',
          'createTime':'创建时间',
        }
        const res = await userserve(this.q)
        const employees = res.data.data
        const aa = []
        employees.forEach(item=>{
          aa.push({'serviceOrderId':item.serviceOrderId,'serviceUserName':item.serviceUserName,'provideServiceUserName':item.provideServiceUserName,
          'totalPrice':item.totalPrice,'payChannel':item.payChannel,'status':item.status,'title':item.title,'createTime':item.createTime})
        })

         aa.forEach(item=>{
        item.createTime=item.createTime.slice(0,10)
        
       })
         const first = aa[0]
         if (!first) return
        const header = Object.keys(first).map(enKey => mapinfo[enKey])

      const data = aa.map(item => {
        const code = item['payChannel']
        item['payChannel'] = hireTyMapx[code]
                const cod = item['status']
        item['status'] = hireTypegtrx[cod]
        return Object.values(item)
      })

     const excel = await import('@/vendor/Export2Excel')
      excel.export_json_to_excel({
        header, // 表头, 传入一个数组
        data,  // 数据, 传入一个二维数组 [ [] ], 二维数组里面的数组就是一条数据
        filename: '服务报表', // 导出的文件名称
        autoWidth: true, // 自适应宽度
        bookType: 'xlsx' // 文件类型
      })
    },


  // 服务状态渲染
  fornasdg(code){
    return hireTypegtrx[code]
  },
  // 支付方式渲染
  foemindatafo(code){
  return hireTyMapx[code]
  },
 // 分页
    handleCurrentChange(index) {
      this.page = index;
      this.loachentr();
    },
    handleSizeChange(size) {
      this.size = size;
      this.loachentr();
    },
    // 搜索
    souuso(){
      if(this.formlist.caluye != ''){
    this.q.username = this.formlist.caluye
      }
    this.loachentr()
    },
    // 重置
    shtbel(){
      this.page = 1
      this.q.username = ''
      this.formlist.caluye = ''
      this.loachentr();
    }
}
}
</script>

<style scoped>
.chenger{
  background-color: #fff;
  padding-left: 25px;
}
/* tabs栏切换 */
::v-deep .is-active {
  color: #ff7144 !important;
}
::v-deep .el-tabs__item:hover {
  color: #ff7144 !important;
}
::v-deep .el-tabs__active-bar {
  background-color: #ff7144 !important;
}
.el-form-item{
   display: inline-block;
   margin-right: 20px;
  width: 15%;
}
.el-input{
  width: 100%;
}
.chencat {
   background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
   border: 1px solid #ff7144;
  color: #fff;
}
.upload {
  position: absolute;
  right: 10%;
  color: #6c6e72;
  font-size: 16px;
}
.upload img {
  width: 15px;
  height: 15px;
  transform: translateY(10%);
  margin-right: 5px;
}
</style>